

        header{
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
        }
        main{
            height: 100vh;
            position: relative;
        }
        main>*{
            overflow: hidden;
        }
        .sideColor{
            background: #f7f7f7;
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0px;
            top: 100%;
            z-index: -1;
        }

        main .projects,
        main .projects .content,
        main .projects .cutPics,
        main .projects .cutPics>*,
        main .projects .cutPics .palace,
        main .projects .cutPics .palace .clip{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
        }
        main .projects .cutPics{
            width: 0%;
            z-index: 0;
            overflow: hidden;
        }
        main .projects .cutPics .shadow{
            background: #000;
            opacity: .2;
            z-index: 2;
        }
        main .projects .cutPics .palace{
            z-index: 1;
            width: 66.2vw;
        }
        main .projects .cutPics .palace .clip{
            z-index: 1;
        }
        main .projects .cutPics .palace .clip .box{
            width: 0%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0px;
            left: 0%;
            
        }
        main .projects .cutPics .palace .clip.current .box{
            width: 25%;
            transition: width ease .8s;
        }
        main .projects .cutPics .palace .clip.atRht .box{
            left: initial !important;
            right: 0px;
        }
        main .projects .cutPics .palace .clip.atRht .box:nth-child(1){
            right: 75%;
        }
        main .projects .cutPics .palace .clip.atRht .box:nth-child(2){
            right: 50%;
        }
        main .projects .cutPics .palace .clip.atRht .box:nth-child(3){
            right: 25%;
        }
        
        main .projects .cutPics .palace .clip .box:nth-child(2){
            left: 25%;
        }
        main .projects .cutPics .palace .clip .box:nth-child(3){
            left: 50%;
        }
        main .projects .cutPics .palace .clip .box:nth-child(4){
            left: 75%;
        }
        main .projects .cutPics .palace .clip .box .mid{
            width: calc(66.2vw / 4);
            overflow: hidden;
            position: absolute;
            height: 100%;
            top: 0px;
            left: 0px;
        }
        main .projects .cutPics .palace .clip .box .mid img{
            top: 0px;
            width: 400%;
            left: 0%;
            position: absolute;
            filter: brightness(100%);
            transform: translateX(-80px);
        }
        main .projects .cutPics .palace .clip.toRht .box .mid img{
            transform: translateX(0px) ;
        }
        main .projects .cutPics .palace .clip.current .box .mid img{
            transition: transform ease .8s,filter ease .8s;
        }
        main .projects .cutPics .palace .clip.rht .box .mid img{
            transform: translateX(80px);
            filter: brightness(30%);
        }
        main .projects .cutPics .palace .clip .box:nth-child(2) .mid img{
            left: -100%;
        }
        main .projects .cutPics .palace .clip .box:nth-child(3) .mid img{
            left: -200%;
        }
        main .projects .cutPics .palace .clip .box:nth-child(4) .mid img{
            left: -300%;
        }

        main .projects .content{
            justify-content: space-between;
        }
        main .projects .content .txt{
            width:43.8%;
            position: relative;
            top: 30px;
            left: 6.15%;
            
        }
        main .projects .content .txt p{
            font-size: 2.9vw;
            color: #fff;
            font-weight: bold;
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
        }
        
        main .projects .content .txt p.max{
            position: relative;
        }
        main .projects .content .txt p .box{
            overflow: hidden;
        }
        main .projects .content .txt p .box>div{
            transform: translateY(calc(100% + 10px));
            transition: transform ease-in-out .8s,opacity ease-in-out .8s;
            opacity: 0;
        }
        main .projects .content .txt p.current .box:nth-child(1)>div{
            transition-delay: 50ms;
        }
        main .projects .content .txt p.current .box:nth-child(2)>div{
            transition-delay: 100ms;
        }
        main .projects .content .txt p.current .box:nth-child(3)>div{
            transition-delay: 150ms;
        }
        main .projects .content .txt p.current .box:nth-child(4)>div{
            transition-delay: 200ms;
        }
        main .projects .content .txt p.current .box>div{
            opacity: 1;
        }
        main .projects .content .txt p.toTop .box>div{
            transform: translateY(0%);
        }
        main .projects .content .txt p.tp .box>div{
            transform: translateY(calc(-100% - 10px));
        }
        main .projects .content>i,
        main .projects .content .round{
            position: absolute;
            left: calc(-8.5vw - 10px);
            transition: 1.4s cubic-bezier(.645,.045,.355,1),left ease 1s .3s;
        }
        main .projects .content i{
            background: #fff;
            height: 1px;
            width: 8.5vw;
        }
        main .projects .content .round{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border:2px solid #fff;
            transform: translateX(8.5vw);
        }
        main .projects .content .chooseMenu{
            position: relative;
            top: 20px;
            width: 37.53%;
            min-width: 490px;
            height: 66vh;
            flex-direction: column;
        }
        main .projects .content .chooseMenu .box{
            padding: 0px 16.4%;
        }
        main .projects .content .chooseMenu .box a{
            position: relative;
            display: block;
            cursor: initial;
            transition: transform .5s cubic-bezier(.215,.61,.355,1),opacity .5s ease;
        }
        main .projects .content .chooseMenu.pointer .box a{
            cursor: pointer;
        }
        main .projects .content .chooseMenu .box a p{
            line-height: 70px;
            font-size: 30px;
        }
        main .projects .content .chooseMenu .box a.current p{
            color: #fa6a00;
        }
        main .projects .content .chooseMenu .box a span{
            position: absolute;
            top: calc(50% - 6px);
            left: -30px;
            font-size: 12px;
            font-weight: bold;
            color: #fa6a00;
            line-height: 1;
            
        }
        main .projects .content .chooseMenu .box a.current p{
            color: #fa6a00;
        }
        main .projects .content .chooseMenu .box a + a{
            border-top: 1px solid #e5e5e5;
        }
        main .proList{
            display: none;
            padding-bottom: 84px;
        }
        main .proList .item .pic{
            padding-bottom: 63.64%;
            position: relative;
        }
        main .proList .item .pic img{
            top: 0px;
            left: 0px;
            position: absolute;
        }
        main .proList .item{
            position: relative;
            display: block;
        }
        main .proList .item + .item{
            margin-top: 84px;
        }
        main .proList .item .proName{
            width: 90%;
            position: absolute;
            left: 0px;
            bottom: -42px;
            padding:18px 0px;
            align-items: flex-end;
            background: #fff;
            font-weight: bold;
            position: absolute;
            z-index: 2;
            line-height: 1.5;
        }
        main .proList .item .proName span{
            font-size: 12px;color: #fa6a00;
            margin-left: 25px;
            margin-right: 20px;
        }
        main .proList .item .proName p{
            font-size: 18px;
        }
        
        footer{
            position: fixed;
            width: 100%;
            left: 0px;
            bottom: 0px;
            z-index: 2;
        }
        
        @media(max-width:1200px){
            
            .beginning.btm.first,
            .leaving.btm.disappear{
                min-width: initial !important;
                width: 43.5678vw !important;
                margin-right: 1vw;
            }
            main .projects .content .chooseMenu{
                width: 48%;
                min-width: initial;
                margin-right: 1vw;
            }
        }
        @media(max-width:1024px){
            main .projects .content .txt{
                width: 37.312%;
            }
            main .projects .content .chooseMenu .box{
                padding: 0px 12%;
            }
            main .projects .content .chooseMenu .box a p{
                font-size: 20px;
                line-height: 50px;
            }
        }
        @media(max-width:767px){
            main{
                height: initial;
            }
            main .projects{
                display: none;
            }
            main .proList{
                display: block;
            }
            footer{
                position: initial;
            }
        }

       
        .beginning.btm{
            left: initial;
            width: 100%;
        }
        .beginning.btm.first{
            width: 34.06vw;
            min-width: 490px;
            bottom: calc(17vh - 20px);
            height: 66vh;
            right: 4.62vw;
        }
        main .projects .content .chooseMenu{
            z-index: 31;
        }
        
        .first main .projects .content .chooseMenu .box a,
        .start main .projects .content .chooseMenu .box a{
            opacity: 1;
            transform: translate(0px,0px);
        }
        .jump main .projects .content .chooseMenu .box a,
        main .projects .content .chooseMenu .box a{
            opacity: 0;
            transform: translate(-100px,80px);
        }
        .first main .projects .content .chooseMenu .box a:nth-child(1){
            transition-delay: 2.9s;
        }
        .first main .projects .content .chooseMenu .box a:nth-child(2){
            transition-delay: 2.975s;
        }
        .first main .projects .content .chooseMenu .box a:nth-child(3){
            transition-delay: 3.05s;
        }
        .first main .projects .content .chooseMenu .box a:nth-child(4){
            transition-delay: 3.125s;
        }
        .first main .projects .content .chooseMenu .box a:nth-child(5){
            transition-delay: 3.2s;
        }
        .first main .projects .content .chooseMenu .box a:nth-child(6){
            transition-delay: 3.275s;
        }
        .first main .projects .content .chooseMenu .box a:nth-child(7){
            transition-delay: 3.35s;
        }

        .start main .projects .content .chooseMenu .box a:nth-child(1){
            transition-delay: .275s;
        }
        .start main .projects .content .chooseMenu .box a:nth-child(2){
            transition-delay: .35s;
        }
        .start main .projects .content .chooseMenu .box a:nth-child(3){
            transition-delay: .425s;
        }
        .start main .projects .content .chooseMenu .box a:nth-child(4){
            transition-delay: .5s;
        }
        .start main .projects .content .chooseMenu .box a:nth-child(5){
            transition-delay: .575s;
        }
        .start main .projects .content .chooseMenu .box a:nth-child(6){
            transition-delay: .65s;
        }
        .start main .projects .content .chooseMenu .box a:nth-child(7){
            transition-delay: .725s;
        }
        
        .jump main .projects .content .chooseMenu .box a{
            transition: transform .45s cubic-bezier(.55,.055,.675,.19),opacity .5s ease;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(7){
            transition-delay: .075s;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(6){
            transition-delay: .15s;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(5){
            transition-delay: .225s;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(4){
            transition-delay: .3s;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(3){
            transition-delay: .375s;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(2){
            transition-delay: .45s;
        }
        .jump main .projects .content .chooseMenu .box a:nth-child(1){
            transition-delay: .525s;
        }
        
        .leaving{
            top: 0px;
            left: 0px;
        }
        .leaving.rht.disappear{
            left: 100%;
        }
        .leaving.btm{
            right: 0px;
            bottom: 0px;
        }
        .leaving.btm.disappear,
        .leaving.btm.first{
            width: 34.06vw;
            min-width: 490px;
            height: 66vh;
            right: 4.62vw;
            bottom: calc(17vh - 20px);
            top: initial;
            left: initial;
        }
        .leaving.btm.first{
            opacity: 0;
            transition: all ease-in-out 1.2s,opacity 0s ease;
        }
        @media (min-width:768px){
            .sideColor{
                top: 0px;
            }
            .leaving.rht.first{
                display: none;
            }
            .leaving.btm.jump{
                width: 100% !important;
                right: 0px;
                bottom: 0px;
                height: 100vh;
                opacity: 1;
                transition: all 1.2s ease-in-out !important;
            }
            .first main .projects .cutPics,
            .start main .projects .cutPics{
                width: 66.2%;
                transition: ease width .8s 3.2s;
            }
            .start main .projects .cutPics{
                transition: ease width .8s .4s;
            }
            .start main .projects .content>i,
            .start main .projects .content .round,
            .first main .projects .content>i,
            .first main .projects .content .round{
                left: 0px;
            }

            .first main .projects .content>i,
            .first main .projects .content .round{
                transition: 1.4s cubic-bezier(.645,.045,.355,1),left ease 1s 3.2s;
            }
        }
        @media (max-width:767px){
            
            .first .sideColor,
            .start .sideColor{
                transition: all ease-in-out 1.2s .3s;
                top: 0px;
            }
            .first .sideColor{
                transition-delay: 3.2s;
            }
            /*.beginning.btm.first{
                width: 100% !important;
                bottom: -40vh !important;
                height: 40vh !important;
                right: 0px !important;
            }*/
            .beginning.btm,
            .leaving{
                display: none !important;
            }
            .leaving.btm.disappear{
                width: 100% !important;
                right: initial !important;
                height: 100vh !important;
                margin-right: initial !important;
                bottom: 100%;
            }
            main .proList .item{
                opacity: 0;
                transform: translateX(200px);
                transition: transform .5s cubic-bezier(.215,.61,.355,1),opacity .5s ease;
            }
            .first main .proList .item,
            .start main .proList .item{
                transform: translateX(0px);
                opacity: 1;
            }

            .first main .proList .item:nth-child(1){
                transition-delay: 4.675s;
            }
            .first main .proList .item:nth-child(2){
                transition-delay: 4.75s;
            }
            .first main .proList .item:nth-child(3){
                transition-delay: 4.825s;
            }
            .first main .proList .item:nth-child(4){
                transition-delay: 4.9s;
            }
            .first main .proList .item:nth-child(5){
                transition-delay: 4.975s;
            }
            .first main .proList .item:nth-child(6){
                transition-delay: 5.05s;
            }
            .first main .proList .item:nth-child(7){
                transition-delay: 5.125s;
            }
      
            .start main .proList .item:nth-child(1){
                transition-delay: 1.275s;
            }
            .start main .proList .item:nth-child(2){
                transition-delay: 1.35s;
            }
            .start main .proList .item:nth-child(3){
                transition-delay: 1.425s;
            }
            .start main .proList .item:nth-child(4){
                transition-delay: 1.5s;
            }
            .start main .proList .item:nth-child(5){
                transition-delay: 1.575s;
            }
            .start main .proList .item:nth-child(6){
                transition-delay: 1.65s;
            }
            .start main .proList .item:nth-child(7){
                transition-delay: 1.725s;
            }
            .jump .sideColor{
                top: -100%;
                transition-delay: 0s;
            }
            .jump main .proList .item{
                transform: translateX(200px);
                opacity: 0;
            }
            .jump main .proList .item:nth-child(7){
                transition-delay: .075s;
            }
            .jump main .proList .item:nth-child(6){
                transition-delay: .15s;
            }
            .jump main .proList .item:nth-child(5){
                transition-delay: .225s;
            }
            .jump main .proList .item:nth-child(4){
                transition-delay: .3s;
            }
            .jump main .proList .item:nth-child(3){
                transition-delay: .375s;
            }
            .jump main .proList .item:nth-child(2){
                transition-delay: .45s;
            }
            .jump main .proList .item:nth-child(1){
                transition-delay: .525s;
            }
        }